<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <#include "/common/base.html" >
    <script>

    </script>
</head>
<body class="easyui-layout" style="min-width: 615px;">
    <!--<div data-options="region:'center',fit: true, border: false">
        <div id="auth-menu-panel" class="easyui-panel" data-options="fit:'true',border: false" style="padding: 20px;position: relative;left: 30px;">
            <div style="width: 260px;float: left;">
                已拥有的菜单：<br>
            <select id="hasMenus" multiple="multiple" style="width: 200px;height: 260px;">
                <#list has as menu>
                    <option value="${menu.id}">${menu.name}</option>
                </#list>
            </select>
            </div>
            <div style="width: 100px;margin-top: 86px;left: 230px;float: left;">
                <a href="#" class="easyui-linkbutton" onclick="addMenu()">==></a>
                <a href="#" class="easyui-linkbutton" style="top: 78px;position: relative;left: -50px;" onclick="removeMenu()"><==</a>
            </div>
            <div style="width: 260px;float: left;">
                不具有的菜单：<br>
            <select id="noMenus" multiple="multiple" style="width: 200px;height: 260px;">
                <#list no as menu>
                    <option value="${menu.id}">${menu.name}</option>
                </#list>
            </select>
            </div>
            <p style="position: fixed;top: 310px;left: 47px;">
            <button onclick="saveMenus()" id="save-btn">保存菜单</button>
        </div>
    </div>-->
    <div data-options="region:'center', fit: true, border: true,width:'230px',height:'300px'">
        <ul id="menu-tree">
        </ul>
    </div>
</body>
<script>
    var $USER_WIN = null;
    var $MENU_TREE = null;
    $(function () {
        // $USER_WIN = $('#auth-menu-panel');
        $MENU_TREE = $('#menu-tree');
        initMenuTree();
    });
    function initMenuTree(){
        $MENU_TREE.tree({
            // url: '/menu/queryMenu',
            checkbox: true,
            data: [{
                id: 'root',
                text: 'ROOT',
                children: [{
                    id: 'root_1',
                    text: 'ROOT_1'
                },{
                    id: 'root_2',
                    text: 'ROOT_2'
                }]
            }],
            onClick: function(node){
                alert('onclick='+node.id);
                var id = node.id;
                var name = node.text;
                var url = node.url;
                var desc = node.attributes['description'];
                var code = node.attributes['code'];
            },
            onExpand: function (node) {
                alert('onExpand='+node.id);
            },
            onCheck: function (node, checked) {
                alert('onCheck='+node.id + '；；；checked=' + checked);
            },
            onSelect: function (node) {
                alert('onSelect='+node.id);
            },
            onLoad: function (panel) {
                alert('onLoad');
            }

        })
    }
    function addMenu(){
        var hasMenus = $('#hasMenus option:selected');
        hasMenus.each(function(a,b,c){
            var v = $(b).val();
            var t = $(b).text();
            removeRecord('hasMenus', v, t);
            addRecord('noMenus', v, t);
        })
    }
    function removeMenu(){
        var noMenus = $('#noMenus option:selected');
        noMenus.each(function(a,b,c){
            var v = $(b).val();
            var t = $(b).text();
            removeRecord('noMenus', v, t);
            addRecord('hasMenus', v, t);
        })
    }
    function removeRecord(selectId, v) {
        $('#'+selectId+' option[value='+v+']').remove();
    }
    function addRecord(selectId, v, t) {
        $('#'+selectId).append('<option value='+v+'>'+t+'</option>');
    }
    function saveMenus(){
        $('#save-btn').attr('disabled', true);
        art.dialog({
            content: '确定要修改吗？',
            ok: function () {
                loading();
                confirmMenus();
            },
            cancel: function(){
                $('#save-btn').attr('disabled', false);
            },
            cancelVal: '关闭'
        });
    }

    function confirmMenus(){
        var checkdIds = [];
        var hasMenus = $('#hasMenus option');
        hasMenus.each(function(a,b,c){
            var v = $(b).val();
            checkdIds.push(v);
        });
        var secRows = parentGetSelections();
        var userId = secRows[0]['id'];
        $.ajax({
            url: 'modifyMenus',
            type: 'post',
            data: {ids: checkdIds.join(','), authId: userId},
            success: function(rsp){
                $('#save-btn').attr('disabled', false);
                if(rsp['success']){
                    msg('操作成功', true);
                }else {
                    msg(rsp['info'],true);
                }
                closeTopLoading();
            },
            error: function(){
                closeTopLoading();
                $('#save-btn').attr('disabled', false);
                msg('操作出错',true);
            }
        });
    }
</script>
</html>